<template>
  <div style="font-size: 30px; text-align: center;" id="tb1">学员成绩单</div>
  <div class="main">
    <el-table :data="tableData" border style="width: 70%">
      <el-table-column prop="id" label="学号" width="180" />
      <el-table-column prop="name" label="姓名" width="180" />
      <el-table-column prop="score" label="分数" width="180" />
      <el-table-column prop="comment" label="评语" width="180" />
      <el-table-column fixed="right" label="Operations" min-width="120">
        <template #default="scope">
            <el-button size="small" type="danger" @click="handleEdit(scope.row)">  编辑  </el-button>
            <!-- <el-button size="small" type="danger" @click="handleDelete(scope.row)">  删除  </el-button> -->
            <el-button size="small" type="danger" @click="handleDelete(scope.row.id)">  删除  </el-button>
          </template>
      </el-table-column>
  </el-table>
  <!-- 编辑模态框 开始 -->
  <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
      <!-- {{ form }} -->
      <el-form :model="form">
        <el-form-item label="id" :label-width="formLabelWidth">
          <el-input v-model="form.id" disabled autocomplete="off" />
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="分数" :label-width="formLabelWidth">
          <el-input-number :min="0" :max="100" v-model="form.score" autocomplete="off" />
        </el-form-item>
        <el-form-item label="评语" :label-width="formLabelWidth">
          <el-input v-model="form.desc" type="textarea" autocomplete="off" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="editUser">
            确认
          </el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 编辑模态框 结束 -->

  </div>
</template>

<script setup>
import { ref } from 'vue';
const tableData = ref([
  {
    id:'001',
    name:'张三',
    score:'90',
    comment:'很优秀',
  },
  {
    id:'002',
    name:'李四',
    score:'92',
    comment:'优秀',
  },
  {
    id:'003',
    name:'王五',
    score:'83',
    comment:'很努力，不错',
  },
  {
    id:'004',
    name:'赵六',
    score:'98',
    comment:'666',
  },
]);
const formLabelWidth = '140px'
const form = ref({});
// 编辑的模态框
const dialogFormVisible = ref(false);
// const handleDelete = (row) => {
//   const index = tableData.value.indexOf(row);
//   if (index > -1) {
//     tableData.value.splice(index, 1);
//   }
// };
function handleDelete(id){
  console.log('🚀 - handleDelete - id:', id)
  // 发送请求 
  tableData.value.forEach((e,index) => {
    if(e.id == id){
    //   console.log('🚀 - tableData.value.forEach - index:', index);
    //   console.log('🚀 - handleDelete - e:', e);
      tableData.value.splice(index,1);
    }
  })
}
// 打开编辑表单
function handleEdit (row) {
  form.value = row;
  dialogFormVisible.value = true
}
// 提交编辑表单
function editUser () {
  // 将数据发送到后台
  // editStudentById(form.value);
  dialogFormVisible.value = false
}

</script>
<style scoped>
.main{
  height: 100%;
  text-align: center;
  /* border: 1px solid red; */
  padding-left: 24%;
  padding-top: 2%;
}
</style>
<!-- <template>
  <div class="bg">
    <Reg v-if="flag" @my-alert="myAlert" />
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Reg from './views/Reg.vue';
const flag = ref(true);
// 父组件中声明的事件
function myAlert () {
  alert('我是父组件中的事件-myAlert');
}
</script>
<style scoped>

</style> -->

<!-- <script setup>
import { ref } from 'vue';
import Login from '@/views/Login.vue';
import Register from '@/views/Register.vue';

const flag = ref(true);

function changeFlag () {
  flag.value = !flag.value;
}
</script>

<template>
  
  <div class="background">
    
    <div class="form-container">
      <Login v-if="!flag" @toggle="changeFlag" />
      <Register v-else @toggle="changeFlag" />
      <button @click="changeFlag">{{ flag ? '已有账号，立即登录' : '没有账号，在线注册' }}</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Login from '@/views/Login.vue';
import Register from '@/views/Register.vue';

const flag = ref(true);

function changeFlag () {
  flag.value = !flag.value;
}
</script>

<style scoped>
.background {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 90vh;
  background-image: url('./img/image.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.form-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  height: 50%;
  padding: 2rem; 
  border-radius: 8px; 
}

button {
  padding: 0.5rem 1rem;
  border: none;
  background-color: #007BFF;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}
</style> -->